<template>
  <n-modal class="express-info" v-model:show="expressInfoModalActive" transform-origin="center">
    <n-card style="width: 60%" :bordered="false" size="huge" role="dialog" aria-modal="true">
      <template #header>
        <div class="my-title--modal">物流信息</div>
      </template>
      <div class="i-info">
        <div class="i-info_item">
          <span>物流单号：3233242424234234</span>
        </div>
        <div class="i-info_item">
          <span>物流类型：德邦快递</span>
        </div>
        <div class="i-info_item">
          <span>收件人：李嘉贤</span>
        </div>
        <div class="i-info_item">
          <span>收件电话：312312312312</span>
        </div>
        <div class="i-info_item">
          <span>收货地址：是的撒大所多大萨达撒大叔大婶大大叔大婶大所大</span>
        </div>
        <div class="i-info_item">
          <span>物流创建时间：312312312312</span>
        </div>
      </div>
      <div class="i-time-line">
        <p>物流动态</p>
        <div class="i-time-line_content">
          <n-timeline>
            <n-timeline-item title="hahhahaahahahah" content="哪里成功" time="2018-04-03 20:46" />
            <n-timeline-item content="哪里错误" time="2018-04-03 20:46" />
            <n-timeline-item content="哪里警告" time="2018-04-03 20:46" />
            <n-timeline-item type="info" content="是的" time="2018-04-03 20:46" />
            <n-timeline-item content="啊" />
          </n-timeline>
        </div>
      </div>
      <template #footer>
        <div class="i-footer">
          <button class="my-btn--primary">确认</button>
        </div>
      </template>
    </n-card>
  </n-modal>
</template>

<script setup>
import {
  reactive,
  inject
} from "vue";

let expressInfoModalActive = inject('expressInfoModalActive')
</script>

<style lang="less" scoped>
.express-info {
  .i-info {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    grid-template-rows: repeat(3, 33.33%);
    padding: 20px 30px;
    margin: 20px;
    border-radius: 4px;

    &_item {
      // margin: 10px 0;
      font-size: 24px;
      font-weight: 500;
      color: #4a5060;
    }
  }
  .i-time-line {
    padding-top: 30px;
    border-top: 1px solid #d8d8d8;
    > p {
      margin-bottom: 20px;
      font-size: 24px;
      font-weight: 500;
      color: #4a5060;
    }
    &_content {
      height: 350px;
      overflow-y: auto;
    }
  }
  .i-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>